
<template>
  <div class="category">
    <div class="option">
      <div>
        <el-button type="primary" @click="toCreateCategory">创建相册</el-button>
        <el-popconfirm 
          width="220"
          confirm-button-text="是"
          cancel-button-text="否"
          title="是否确定删除此相册?"
          @confirm="deleteCategory"
        >
          <template #reference>
            <el-button type="danger">删除当前相册</el-button>
          </template>
        </el-popconfirm>
        <el-button type="success" @click="share">分享当前相册</el-button>
      </div>
      <div>
        <span class="info">选择当前相册：</span>
        <el-select v-model="selectValue" class="m-2" placeholder="Select" size="default">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
    </div>
    <h1 v-show="!selectValue">未选择相册</h1>
    <h1 v-show="selectValue && imagesOfCategory.length === 0">当前相册没有任何图片</h1>
    <n-image-group>
      <ImageEl v-for="image in displayImages" :image="image" :key="image.id"></ImageEl>
    </n-image-group>
    <div class="more" v-if="imagesOfCategory.length > imageNumber">
      <span @click="displayMore">剩余{{ imagesOfCategory.length - imageNumber }}张图片未展示，点击加载更多</span>
    </div>
    <div style="display: none;">
      <a-image
        :width="200"
        :preview="{
          visible: previewShow,
          onVisibleChange: setPreviewShow,
        }"
        :src=urlList[initialIndex]
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ElMessage } from "element-plus";
import { computed, onActivated, ref, watch } from "vue"
import { removeCategory } from "../../request/category";
import { useImageStore } from "../../store/image"
import { storeToRefs } from "pinia";
import ImageEl from "../../components/YunImage/ImageEl.vue";
import { useImageList, useImagePreview } from "../../hook/imagePreview";

const imageStore = useImageStore()
// 下拉框的值
const { categorySelectValue: selectValue } = storeToRefs(imageStore)
const { allImages: imagesOfCategory, displayImages, displayMore, imageNumber } = useImageList(50, 30, 'currentCategory')
const options = computed(() => {
  let optionArr = [] as any[]
  imageStore.categories.forEach(val => {
    optionArr.push({label: val.categoryName, value: val.id.toString()})
  })
  return optionArr
})
const {urlList, initialIndex, setPreviewShow, previewShow} = useImagePreview(displayImages)
// 当切换分类时，当前展示的图片数量重置
watch([selectValue], () => {
  imageNumber.value = 50
})
function toCreateCategory(){
  imageStore.categoryCreating = true
}
function deleteCategory(){
  if(!selectValue.value){
    ElMessage({type: 'error', message: '未选择相册'})
    return
  }
  removeCategory(parseInt(selectValue.value)).then(
    res => {
      if(res.data.success){
        ElMessage({type: 'success', message: '删除成功'})
        imageStore.categories = imageStore.categories.filter(val => val.id != parseInt(selectValue.value))
        if(imageStore.categories.length){
          imageStore.categorySelectValue = imageStore.categories[0].id.toString()
        }
        else {
          imageStore.categorySelectValue = ''
        }
      }
    }
  )
}
function share(){
  let category = imageStore.categories.find(val => val.id === parseInt(selectValue.value))
  if(!category){
    ElMessage({type:"error", message:"未选择相册"})
    return
  }
  imageStore.shareOperating = true
  imageStore.categorySharing = category
}

onActivated(() => {
  imageStore.debounceResizeImage()
})
</script>

<style scoped>

</style>